<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jsp文件头和头部 -->
    <%@ include file="../base/top.jsp"%>
    <!-- 日期框 -->
    <link rel="stylesheet" href="static/ace/css/datepicker.css"/>
    <link rel="stylesheet" href="static/css/my_project_details/my_project_details1.css">
    <style>
        .modal-dialog{
            z-index: 9999;
        }
        #select-bar{
            height: 30px;
            line-height: 30px;
            width: 80%;
            margin: 30px 10% 10px 10%
        }

        #teach-course-close{
            float: left;
            width: 50%;
            min-width: 300px;
            margin: -10px 5px 0px 0px;
            /*position: absolute;*/
            position: relative;

        }
        #teach-course-open{
            padding: 5px;
            width:100%;
            height: 250px;
            position: absolute;
            z-index: 999;
            left: -5px;
            top:40px;
            overflow: auto;
            background-color: white;
            display: none;
        }
    </style>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="select-bar">
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="select-bar">
                                <span style="float: left">请选择标签库:</span>
                                <select style="float: left;margin:0px 10px 0px 5px" id="label-lib-select">
                                    <c:forEach items="${labelLibInfoList}" var="labelLibInfo">
                                        <option value="${labelLibInfo.labelLibId}">${labelLibInfo.labelLibName}</option>
                                    </c:forEach>
                                </select>
                                <span style="float: left;margin-right: 5px">请选择授课:</span>
                                <div id="teach-course-close">
                                    <ul class="list-inline" id="teach-course-ul-close" >
                                        <li></li>
                                    </ul>
                                    <div id="teach-course-open">
                                        <ul class="list-inline" id="teach-course-ul-open" >
                                            <li></li>
                                        </ul>
                                    </div>
                                </div>
                                <div style="float: right">
                                    <i class='ace-icon glyphicon glyphicon-list'
                                       style="float: left;margin: 8px 5px 0px 1px;cursor:pointer" id="see-more"></i>
                                    <button style="float: left" class="btn btn-primary btn-sm" id="search-btn">搜索</button>
                                </div>
                            </div>
                        </div>
                    </div>


                <div id="echart" style="width:80%;height:400px;margin: auto;">

                </div>
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
</div>

<%@ include file="../base/foot.jsp" %>

<script  type="text/javascript" src="static/chartjs/echarts.min.js"></script>

<script type="text/javascript">
    $(top.hangge());//关闭加载状态
    $(document).ready(function () {
        if($("#label-lib-select").val()!=null) {
            showTeachCourse($("#label-lib-select").val())
        }
    });
    $("#label-lib-select").change(function () {
        if($(this).val()==null){
            prompt_alert('error',"请先选择课程",0);
            return;
        }
        showTeachCourse($(this).val());
    });
    function showTeachCourse(labelLibId) {
        $.ajax({
            url:"error_analysis/getTeachCourse",
            type:"POST",
            dataType: "json",
            data:{
                "labelLibId":labelLibId
            },
            success:function (data) {
                $("#teach-course-ul-close").html("");
                $("#teach-course-ul-open").html("");
                if(data!=null && data.length>0){
                    for(var i=0;i<(data.length>4?4:data.length);i++){
                        $("#teach-course-ul-close").append("<li><label class=\"checkbox\"><input class=\"ace\" id="+data[i]['teachCourseId']
                            +" type=\"checkbox\"><span class=\"lbl\"></span> "+data[i]['teachCourseName']+"</label></li>");
                    }
                    for(var i=4;i<20;i++){//data.length
                        $("#teach-course-ul-open").append("<li><label class=\"checkbox\"><input class=\"ace\" id="+data[i]['teachCourseId']
                            +" type=\"checkbox\"><span class=\"lbl\"></span> "+data[i]['teachCourseName']+"</label></li>");
                    }
                }else{
                    $("#teach-course-ul").append("<li style='margin-top: 11px'>暂无使用该标签库的授课信息</li>");
                }
            }
        })
    }
    $("#see-more").click(function () {
        $("#teach-course-open").toggle();
    })
    $("#search-btn").click(function () {
         var teachCourseIds =new Array();
        for (var i = 0; i < $("#teach-course-ul-close input:checkbox:checked").length; i++) {
            var teachCourseId="";
            teachCourseId = $("#teach-course-ul-close input:checkbox:checked").eq(i).attr("id");
            teachCourseIds.push(teachCourseId);
        }
        for (var i = 0; i < $("#teach-course-ul-open input:checkbox:checked").length; i++) {
            var teachCourseId="";
            teachCourseId = $("#teach-course-ul-open input:checkbox:checked").eq(i).attr("id");
            teachCourseIds.push(teachCourseId);
        }
        if(teachCourseIds==null || teachCourseIds.length==0){
            prompt_alert('error',"请先选择授课",0);
        }
        $.ajax({
            url:"error_analysis/getTeachCourseLabel",
            type:"POST",
            dataType: "json",
            data:{
                "datas":teachCourseIds.join()
            },
            success:function (data) {
                console.log(data);
                option.yAxis.data =data.yaxisData;
                for(var i=0;i<data.nameList.length;i++){
                    var josn = deepClone(echarjosn);
                    josn.name=data.nameList[i];
                    josn.data = data.seriesData[i];
                    option.series.push(josn);
                }
                console.log(option);
                myChart.setOption(option);
            }
        })
        //console.log(teachCourseIds);
    })

    var myChart = echarts.init(document.getElementById('echart'));
    var echarjosn = {
        name: '',
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
        data: ''
    }
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ''
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ''
        },
        series: [

        ]
    };
    function deepClone(obj){
        var objClone = Array.isArray(obj)?[]:{};
        if(obj && typeof obj==="object"){
            for(key in obj){
                if(obj.hasOwnProperty(key)){
                    //判断ojb子元素是否为对象，如果是，递归复制
                    if(obj[key]&&typeof obj[key] ==="object"){
                        objClone[key] = deepClone(obj[key]);
                    }else{
                        //如果不是，简单复制
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }
</script>
</body>
</html>
